.menu-wrap {
  flex-direction: column;
  .header {
    height: 48px;
    background-color: #ee742f;
    align-items: center;
    justify-content: center;
    .header-body {
      position: relative;
      width: 150px;
      height: 30px;
      border: 0.333333px solid #ffffff;
      border-radius: 15px;
      > div {
        width: 50%;
        align-items: center;
        justify-content: center;
        text {
          font-size: 14px;
          color: #ffffff;
        }
      }
      
      .slider {
        height: 100%;
        position: absolute;
        background-color: #ffffff;
        width: 50%;
        border-radius: 15px;
        text {
          color: #ee742f;
        }
      }

      @keyframes slider {
        from {
          transform: translate(0, 0);
        }

        to {
          transform: translate(75px, 0);
        }
      }

      .pos {
        animation-name: slider;
        animation-duration: 1s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
      }
      // .pos {
      //   left: 50%;
      // }
    }
  }
}